<style lang='scss' scoped>
.Wallet {
    width: 100%;
    height: 99.9%;
    overflow: auto;
    font-size: 0.8rem;
    padding: 0.8rem;
    .Wallet_box {
        .Wallet_top {
            color: #fff;
            height: 12rem;
            background: url("../../static/images/user/my-wallet.png");
            background-size: 100% 100%;
            font-size: 0.8rem;
            padding: 0.8rem 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .shang {
                flex: 1.3;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .left {
                    .num {
                        font-size: 2rem;
                        font-weight: bold;
                        margin-top: 0.3rem;
                    }
                }
                .right {
                    .button {
                        width: 100px;
                        border-radius: 0.5rem;
                        background: linear-gradient(
                            135deg,
                            #fa904e 0%,
                            #fa7562 100%
                        );
                        height: 2.2rem;
                        text-align: center;
                        line-height: 2.2rem;
                        margin: 1rem auto;
                    }
                }
            }
            .xia {
                padding-top: 0.8rem;
                border-top: 1px solid #ffffff6c;
                flex: 1;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .left,
                .right {
                    .num {
                        text-align: center;
                        font-size: 1.2rem;
                        font-weight: bold;
                        margin-top: 0.5rem;
                    }
                }
            }
        }
        .Wallet_center {
            border-radius: 0.5rem;
            background-color: #fff;
            margin: 1rem 0;
            .list_box {
                padding: 0 1rem;
                .list {
                    padding: 1rem 0;
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px solid #e5e5e5;
                    .right {
                        text {
                            display: inline-block;
                            margin-right: 0.5rem;
                            color: #07c05f;
                        }
                    }
                }
                // 最后一个不加border-bottom
                .list:last-child {
                    border-bottom: none;
                }
            }
        }
        .Wallet_footer {
            border-radius: 0.5rem;
            background-color: #fff;
            .list_box {
                padding: 0 1rem;
                .list {
                    display: flex;
                    justify-content: space-between;
                    padding: 1rem 0;
                    border-bottom: 1px solid #e5e5e5;
                    .left {
                        margin-right: 0.8rem;
                        image {
                            width: 2.5rem;
                            vertical-align: middle;
                        }
                    }
                    .center {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        .shang {
                            font-size: 0.9rem;
                        }
                        .xia {
                            font-size: 0.7rem;
                            color: #999;
                        }
                    }
                    .right {
                        display: flex;
                        align-items: center;
                        .icon {
                            width: 1rem;
                            margin-left: 0.5rem;
                        }
                    }
                }
                .list:last-child {
                    border-bottom: none;
                }
            }
        }
    }
}
</style>

<template>
    <view class='Wallet'>
        <u-navbar title="我的钱包"> </u-navbar>
        <view class="Wallet_box">
            <!-- Wallet_top -S -->
            <view class="Wallet_top">
                <view class="shang">
                    <view class="left">
                        <view class="text">
                            总收入（元）
                        </view>
                        <view class="num">
                            0.00
                        </view>
                    </view>
                    <view class="right">
                        <view class="button" @click="gopathWithdrawnow">
                            立即提现
                        </view>
                    </view>
                </view>
                <view class="xia">
                    <view class="left">
                        <view class="tetx">
                            可提现金额（元）
                        </view>
                        <view class="num">
                            0.00
                        </view>
                    </view>
                    <view class="right">
                        <view class="tetx">
                            预估到账金额（元）
                        </view>
                        <view class="num">
                            0.00
                        </view>
                    </view>
                </view>
            </view>
            <!-- Wallet_top -E -->
            <!-- Wallet_center -S -->
            <view class="Wallet_center">
                <view class="list_box">
                    <view class="list" v-for="(item, index) in state.Wallet_center_list" :key="index" @click="Wallet_centergopath(item)">
                        <view class="left">
                            {{item.name}}
                        </view>
                        <view class="right">
                            <text v-if="item.text">
                                {{item.text}}
                            </text>
                            <u-icon v-if="item.righticon" name="arrow-right" size="25" color="#999"></u-icon>
                        </view>
                    </view>
                </view>
            </view>
            <!-- Wallet_center -E -->
            <!-- Wallet_footer -S -->
            <view class="Wallet_footer">
                <view class="list_box">
                    <view class="list" v-for="(item, index) in state.Wallet_footer_list" :key="index" @click="Wallet_footergopath(item)">
                        <view class="left">
                            <image :src="item.url" mode="widthFix" />
                        </view>
                        <view class="center">
                            <view class="shang">
                                {{item.name}}
                            </view>
                            <view class="xia">
                                {{item.text}}
                            </view>
                        </view>
                        <view class="right">
                            <view class="num">￥{{item.num}}</view>
                            <view class="icon">
                                <u-icon v-if="item.righticon" name="arrow-right" size="25" color="#999"></u-icon>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- Wallet_footer -E -->
        </view>
    </view>
</template>

<script setup lang='ts'>
import { reactive, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { walletTotal } from "@/api/user";
const state = reactive<{
    Wallet_center_list: Array;
    Wallet_footer_list: Array;
}>({
    Wallet_footer_list: [
        {
            type: 0,
            name: "我的总收入",
            text: "邀请会员/创作/分成/额外奖励",
            num: "0.00",
            url: "../../static/images/user/icon_1.png",
            righticon: false,
        },
        {
            type: 2001,
            name: "影视短剧收益",
            text: "创作收益/分成/奖励收益",
            num: "0.00",
            url: "../../static/images/user/icon_3.png",
            righticon: true,
        },
        {
            type: 1002,
            name: "任务达成奖励收益",
            text: "奖励收益",
            num: "0.00",
            url: "../../static/images/user/icon_4.png",
            righticon: true,
        },
    ],
    Wallet_center_list: [
        {
            name: "提现银行卡",
            text: "已绑定",
            righticon: true,
        },
        {
            name: "提现记录",
            text: "",
            righticon: true,
        },
    ],
});
onLoad(() => {
    console.log("onLoad");
});
onShow(() => {
    getData();
});
const Wallet_centergopath = (item) => {
    switch (item.name) {
        case "提现记录":
            uni.navigateTo({ url: "/pages/user/Withdrawalrecord" });
            break;
        case "任务达成奖励收益":
            uni.navigateTo({ url: "/pages/task/task" });
            break;
        default:
            break;
    }
};
// 点击跳转
const Wallet_footergopath = (item) => {
    switch (item.name) {
        case "影视短剧收益":
            uni.reLaunch({ url: "/pages/data/data" });
            break;
        case "任务达成奖励收益":
            uni.reLaunch({ url: "/pages/task/task" });
            break;
        default:
            break;
    }
};
const getData = async () => {
    const walletTotallist = await walletTotal();
    if (walletTotallist.length) {
        walletTotallist.forEach((item) => {
            state.Wallet_footer_list.forEach((item2) => {
                if (item.type == item2.type) {
                    item2.num = item.total_amount;
                }
            });
        });
    }
};
// 立即提现
const gopathWithdrawnow = () => {
    uni.navigateTo({
        url: "/pages/user/Withdrawnow",
    });
};
</script>